<!-- 我的消息 -->
<template>
  <div id="">
    <headerbox :headerTitle="'我的消息'" :hasBack="true"></headerbox>
    <ul class="messageList">
      <li v-for="chatItem in conversationList" :key="chatItem.key"
      @click="toRongyunChat(chatItem.targetId)">
        <img :src="chatItem.senderPortraitUri" alt="">
        <div class="">
          <span class="justify-content">
            <h3>{{chatItem.senderUserName || '用户名'}}</h3>
            <p>{{getReceiveTime(chatItem.sentTime)}}</p>
          </span>
          <p>{{chatItem.latestMessage.content.content}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import {dateChangeTime} from '@/utils/util.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    rongToken:'',       //用户的融云token
    userId:'',          //当前用户id
    conversationList:[],
  }),
  computed: {

  },
  methods: {
    ...mapMutations(['setRongLoad']),
    // 进入聊天界面
    toRongyunChat(targetId ) {
      this.$router.push({path:'/rongyunChat',query:{targetId:targetId }});
      // this.setRongLoad(true);
    },
    // 接收消息时间
    getReceiveTime(timer) {
      let hhmmss = dateChangeTime(timer).split(' ')[1];
      return hhmmss;
    },
    // 融云初始化
    init() {
      let self = this;
      RongIMLib.RongIMClient.init(this.$globalData.rongAppkey);
      // 设置连接监听状态 （ status 标识当前连接状态 ）
       // 连接状态监听器
       RongIMClient.setConnectionStatusListener({
          onChanged: function (status) {
              switch (status) {
                  case RongIMLib.ConnectionStatus.CONNECTED:
                      console.log('链接成功');
                      break;
                  case RongIMLib.ConnectionStatus.CONNECTING:
                      console.log('正在链接');
                      break;
                  case RongIMLib.ConnectionStatus.DISCONNECTED:
                      console.log('断开连接');
                      break;
                  case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:
                      console.log('其他设备登陆');
                      break;
                    case RongIMLib.ConnectionStatus.DOMAIN_INCORRECT:
                      console.log('域名不正确');
                      break;
                  case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
                    console.log('网络不可用');
                    break;
                  }
          }});
          // 消息监听器
          RongIMClient.setOnReceiveMessageListener({
             // 接收到的消息
             onReceived: function (message) {
                 // 判断消息类型
                 switch(message.messageType){
                     case RongIMClient.MessageType.TextMessage:
                         // message.content.content => 消息内容
                         break;
                     case RongIMClient.MessageType.VoiceMessage:
                         // 对声音进行预加载
                         // message.content.content 格式为 AMR 格式的 base64 码
                         break;
                     case RongIMClient.MessageType.ImageMessage:
                        // message.content.content => 图片缩略图 base64。
                        // message.content.imageUri => 原图 URL。
                        break;
                     case RongIMClient.MessageType.DiscussionNotificationMessage:
                        // message.content.extension => 讨论组中的人员。
                        break;
                     case RongIMClient.MessageType.LocationMessage:
                        // message.content.latiude => 纬度。
                        // message.content.longitude => 经度。
                        // message.content.content => 位置图片 base64。
                        break;
                     case RongIMClient.MessageType.RichContentMessage:
                        // message.content.content => 文本消息内容。
                        // message.content.imageUri => 图片 base64。
                        // message.content.url => 原图 URL。
                        break;
                     case RongIMClient.MessageType.InformationNotificationMessage:
                         // do something...
                        break;
                     case RongIMClient.MessageType.ContactNotificationMessage:
                         // do something...
                        break;
                     case RongIMClient.MessageType.ProfileNotificationMessage:
                         // do something...
                        break;
                     case RongIMClient.MessageType.CommandNotificationMessage:
                         // do something...
                        break;
                     case RongIMClient.MessageType.CommandMessage:
                         // do something...
                        break;
                     case RongIMClient.MessageType.UnknownMessage:
                         // do something...
                        break;
                     default:
                         // do something...
                 }
             }
         });
      },
      // 连接服务器
      RongConnect() {
        let self = this;
        RongIMClient.connect(self.rongToken, {    //融云链接服务器
           onSuccess: function(userId) {
             console.log("Login successfully." + userId);
             self.conversationRong();
           },
           onTokenIncorrect: function() {
             console.log('token无效');
           },
           onError:function(errorCode){
                 var info = '';
                 switch (errorCode) {
                   case RongIMLib.ErrorCode.TIMEOUT:
                     info = '超时';
                     break;
                   case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                     info = '未知错误';
                     break;
                   case RongIMLib.ErrorCode.UNACCEPTABLE_PaROTOCOL_VERSION:
                     info = '不可接受的协议版本';
                     break;
                   case RongIMLib.ErrorCode.IDENTIFIER_REJECTED:
                     info = 'appkey不正确';
                     break;
                   case RongIMLib.ErrorCode.SERVER_UNAVAILABLE:
                     info = '服务器不可用';
                     break;
                 }
                 console.log(errorCode);
               }
         });
      },
      conversationRong() {
        let self = this;
        RongIMClient.getInstance().getConversationList({
          onSuccess: function(list) {
            // list => 会话列表集合。
            console.log(list);
            self.conversationList = list;
          },
          onError: function(error) {
             // do something...
          }
        },null);
      }
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.userId = xlyd_loginInfo.id;    //当前用户id
    this.rongToken = xlyd_loginInfo.rongToken;      //融云的token
    this.init();    //融云初始化
    this.RongConnect();
    let self = this;
    self.conversationRong();
  }
}
</script>
<style lang="scss" scoped>
.messageList{
  padding: 0 10px;
  background: white;
  li{
    @include flex;
    border-bottom: 1px solid $boxBgcolor;
    padding: 10px 0;
    img{
      width: 45px;
      height: 45px;
      border-radius: 100%;
    }
    div{
      @include flexcell;
      width: 80%;
      margin-left: 10px;
      p{
        font-size: 12px;
        color: $lightColor;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 5px;
      }
    }
  }
}
</style>
